<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗挑战，通关有奖</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            /* 这里将背景颜色注释掉，改为使用背景图片 */
            /* background-color: #FFE4B5; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            /* 设置背景图片，这里假设图片名为 festive_background.jpg，需根据实际情况修改路径 */
            background-image: url(https://gd-hbimg.huaban.com/f25bbd160db643c809ea0746347f37c0081d76b8731af-udF21x);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        h1 {
            color: #FF0000;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        button {
            padding: 15px 30px;
            font-size: 18px;
            background-color: #FFD700;
            color: #000000;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        button:hover {
            background-color: #FFBF00;
        }

        #question {
            font-size: 24px;
            margin: 20px 0;
            color: #000000;
        }

        #timer {
            font-size: 36px;
            color: #FF0000;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        #poemFull {
            display: none;
            font-size: 18px;
            margin-top: 20px;
        }

        /* 龙元素动画 */
        @keyframes dragonFly {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(100%);
            }
        }

       .dragon {
            position: absolute;
            top: 20px;
            left: -100px;
            width: 200px;
            height: 150px;
            background-image: url('dragon.png');
            background-size: cover;
            animation: dragonFly 10s linear infinite;
        }
    </style>
</head>

<body>
    <h1>古诗挑战，通关有奖</h1>
    <div class="dragon"></div>
    <button id="startButton">放马过来</button>
    <div id="question"></div>
    <button id="selectButton" style="display: none;">就你了</button>
    <div id="timer"></div>
    <div id="poemFull"></div>
    <button id="viewFullButton" style="display: none;">查看全文</button>

    <script>
        const poems = [
            {
                question: "《静夜思》的第一句是什么？",
                fullText: "床前明月光，疑是地上霜。举头望明月，低头思故乡。"
            },
            {
                question: "《春晓》的作者是谁？",
                fullText: "春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。"
            }
        ];
        let currentPoem;
        let timer;
        let countdown;

        document.getElementById('startButton').addEventListener('click', function () {
            this.style.display = 'none';
            document.getElementById('selectButton').style.display = 'block';
            const questionElement = document.getElementById('question');
            const allQuestions = poems.map(poem => poem.question);
            let questionIndex = 0;
            const flashInterval = setInterval(() => {
                questionElement.textContent = allQuestions[questionIndex];
                questionIndex = (questionIndex + 1) % allQuestions.length;
            }, 200);
            setTimeout(() => {
                clearInterval(flashInterval);
            }, 3000);
        });

        document.getElementById('selectButton').addEventListener('click', function () {
            this.style.display = 'none';
            currentPoem = poems[Math.floor(Math.random() * poems.length)];
            document.getElementById('question').textContent = currentPoem.question;
            document.getElementById('timer').style.display = 'block';
            document.getElementById('viewFullButton').style.display = 'none';
            countdown = 60;
            document.getElementById('timer').textContent = countdown;
            timer = setInterval(() => {
                countdown--;
                document.getElementById('timer').textContent = countdown;
                if (countdown <= 0) {
                    clearInterval(timer);
                    document.getElementById('timer').style.display = 'none';
                    document.getElementById('viewFullButton').style.display = 'block';
                }
            }, 1000);
        });

        document.getElementById('viewFullButton').addEventListener('click', function () {
            document.getElementById('poemFull').style.display = 'block';
            document.getElementById('poemFull').textContent = currentPoem.fullText;
        });
    </script>
</body>

</html>